<template>
  <view class="product-list">
    <view class="product-list-top">
      <view class="left clamp2 max-w-380rpx">
        <text class="text-#1C213E text-28rpx fw-600">{{ productData.productName }}</text>
      </view>
      <view
        :class="{
          'right-default': productData.rankNo > 1,
          'flex': true,
          'px-16rpx': true,
          'py-8rpx': true,
          'rank_1': productData.rankNo === 1,
          'rank_2': productData.rankNo === 2,
          'rank_3': productData.rankNo === 3,
          'rank-default': productData.rankNo >= 4
        }"
        @click="goRankDetail(productData)"
      >
        <uv-icon
          v-if="productData.rankNo <= 3"
          :name="`https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-index-order-ranking-${productData.rankNo}.svg`"
          class="pr-8rpx"
          color="#727687"
          size="16"
        ></uv-icon>
        <text class="text-#727687 text-24rpx fw-400">您在第{{ productData.rankNo }}名</text>
        <uv-icon name="arrow-right" class="mt-4rpx pl-8rpx" color="#727687" size="14"></uv-icon>
      </view>
    </view>
    <view class="product-list-content mt-34rpx">
      <view class="item pr-60rpx pl-32rpx py-32rpx flex flex-items-center justify-between">
        <view class="flex text-#1C213E text-24rpx fw-600 w-96rpx">
          <text>我接单的线索量</text>
        </view>
        <view class="time-box flex flex-col flex-items-center">
          <text class="text-#007BFF text-32rpx fw-600 mb-16rpx">{{ productData.person.toDayCount }}</text>
          <text class="text-#727687 text-24rpx fw-400">本日</text>
        </view>
        <uv-line direction="col" color="#ececec" length="28"></uv-line>
        <view class="time-box flex flex-col flex-items-center">
          <text class="text-#007BFF text-32rpx fw-600 mb-16rpx">{{ productData.person.thisWeekCount }}</text>
          <text class="text-#727687 text-24rpx fw-400">本周</text>
        </view>
        <uv-line direction="col" color="#ececec" length="28"></uv-line>
        <view class="time-box flex flex-col flex-items-center">
          <text class="text-#007BFF text-32rpx fw-600 mb-16rpx">{{ productData.person.thisMonthCount }}</text>
          <text class="text-#727687 text-24rpx fw-400">本月</text>
        </view>
      </view>
      <view class="item pr-60rpx pl-32rpx py-32rpx flex flex-items-center justify-between">
        <view class="flex text-#1C213E text-24rpx fw-600 w-96rpx">
          <text>平台总共线索量</text>
        </view>
        <view class="time-box flex flex-col flex-items-center">
          <text class="text-#007BFF text-32rpx fw-600 mb-16rpx">{{ productData.platform.toDayCount }}</text>
          <text class="text-#727687 text-24rpx fw-400">本日</text>
        </view>
        <uv-line direction="col" color="#ececec" length="28"></uv-line>
        <view class="time-box flex flex-col flex-items-center">
          <text class="text-#007BFF text-32rpx fw-600 mb-16rpx">{{ productData.platform.thisWeekCount }}</text>
          <text class="text-#727687 text-24rpx fw-400">本周</text>
        </view>
        <uv-line direction="col" color="#ececec" length="28"></uv-line>
        <view class="time-box flex flex-col flex-items-center">
          <text class="text-#007BFF text-32rpx fw-600 mb-16rpx">{{ productData.platform.thisMonthCount }}</text>
          <text class="text-#727687 text-24rpx fw-400">本月</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script name="productList" setup>
const props = defineProps({
  productData: {
    type: Object,
    default: () => {}
  }
});

function goRankDetail(row) {
  uni.navigateTo({
    url: `/subProduct/pages/orderRankingDetail?productId=${row.productId}&title=${row.productName}`
  });
}
</script>

<style lang="scss" scoped>
.product-list {
  padding-bottom: 32rpx;
  margin-bottom: 32rpx;
  border-bottom: 2px dashed #e6e6e6;

  &:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: none;
  }
  &-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      // &::before {
      //   content: '.';
      //   width: 8rpx;
      //   height: 28rpx;
      //   background-color: #1484ee;
      //   color: #1484ee;
      //   border-radius: 0px 99px 99px 0px;
      //   margin-right: 24rpx;
      //   margin-left: -24rpx;
      // }
    }
    .rank_1 {
      background: linear-gradient(90deg, rgba(247, 204, 90, 0.2) 0%, rgba(247, 204, 90, 0.05) 100%);
      border-radius: 4px 4px 4px 4px;
    }
    .rank_2 {
      background: linear-gradient(90deg, rgba(26, 26, 26, 0.05) 0%, rgba(26, 26, 26, 0) 100%);
      border-radius: 4px 4px 4px 4px;
    }
    .rank_3 {
      background: linear-gradient(90deg, rgba(241, 173, 112, 0.1) 0%, rgba(241, 173, 112, 0) 100%);
      border-radius: 4px 4px 4px 4px;
    }
    .rank-default {
      background: #f9f9f9;
      border-radius: 4px 4px 4px 4px;
    }
  }
  &-content {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    .item {
      background-color: #f7f7f7;
      margin-top: 24rpx;
      &:first-child {
        margin-top: 0;
      }
    }
  }
}
</style>
